<script setup lang="ts">

</script>

<template>
  <section class="section-padding">
    <div class="container-max">
      <div class="mb-12 text-center">
        <h2 class="text-3xl title-gradient font-bold mb-6">
          新闻资讯
        </h2>
        <p class="text-xl text-gray-600">
          了解行业最新动态和公司发展
        </p>
      </div>

      <div class="gap-8 grid md:grid-cols-3">
        <article class="rounded-lg bg-white shadow-lg transition-shadow duration-300 overflow-hidden hover:shadow-xl">
          <div class="bg-gradient-to-r h-48 from-blue-400 to-purple-500" />
          <div class="p-6">
            <div class="text-sm text-gray-500 mb-2">
              2025-03-15
            </div>
            <h3 class="text-xl font-bold mb-3">
              公司备品备件突破10000+品种
            </h3>
            <p class="text-gray-600 mb-4">
              截至2025年3月31日，公司累计统计备品备件10000+品种，为客户提供更完善的服务...
            </p>
            <a href="#" class="text-blue-600 font-medium hover:text-blue-700">阅读更多 →</a>
          </div>
        </article>

        <article class="rounded-lg bg-white shadow-lg transition-shadow duration-300 overflow-hidden hover:shadow-xl">
          <div class="bg-gradient-to-r h-48 from-green-400 to-blue-500" />
          <div class="p-6">
            <div class="text-sm text-gray-500 mb-2">
              2025-02-28
            </div>
            <h3 class="text-xl font-bold mb-3">
              2025年上半年营收达1384万元
            </h3>
            <p class="text-gray-600 mb-4">
              公司业务不断扩张，营收和利润增速不断攀升，展现出强劲的发展势头...
            </p>
            <a href="#" class="text-blue-600 font-medium hover:text-blue-700">阅读更多 →</a>
          </div>
        </article>

        <article class="rounded-lg bg-white shadow-lg transition-shadow duration-300 overflow-hidden hover:shadow-xl">
          <div class="bg-gradient-to-r h-48 from-purple-400 to-pink-500" />
          <div class="p-6">
            <div class="text-sm text-gray-500 mb-2">
              2025-01-20
            </div>
            <h3 class="text-xl font-bold mb-3">
              四角预清洗机研发成功
            </h3>
            <p class="text-gray-600 mb-4">
              新研发的四角预清洗机解决了装框后四角除胶的难题，提高了生产效率...
            </p>
            <a href="#" class="text-blue-600 font-medium hover:text-blue-700">阅读更多 →</a>
          </div>
        </article>
      </div>

      <div class="mt-12 text-center">
        <NuxtLink to="/news" class="btn-outline">
          查看更多新闻
        </NuxtLink>
      </div>
    </div>
  </section>
</template>

<style scoped>

</style>
